<template>
	<transition v-if='show_trans' enter-active-class='animated fadeIn detailFourMs'>
		<div class="public-attribute detail">
				
			<detail-prompt v-show='show_prompt'>
				{{prompt_text}}
			</detail-prompt>
			
			<detail-header ref="detail"></detail-header>
			
			<detail-title
							:detailTitle='detailTitle'
							:detailTag='detailTag'
							:detailComm='detailComm'
							:detailCtsNum='detailCtsNum'
			></detail-title>
			
			<detail-content
							:detailUser='detailUser'
							:detailConImg='detailConImg'
							:detailContent='detailContent'
			></detail-content>
			
			<detail-footer 
							:detailComm='detailComm'
							@topUpChange='topUpChanges'
			>
			</detail-footer>
			
			<detail-comments 
							:showCts='show_cts'
							:showNotCts='show_notcts'
							:commentsList='commentsList'
			>
			</detail-comments>
			
			<detail-tools 
							:ROUTERMOD='ROUTERMOD'
							:ToolsId='ToolsId' 
							:ToolsMod='ToolsMod'
							@ToolsChange='DetailCommentsChange'
							@toolsPrompt='toolsPrompt'
			>
			</detail-tools>
			 
		</div>
	</transition>
</template>

<script> 
	import axios from 'axios'
	import DetailHeader from '../../common/CommonHeader'
	import DetailTitle from './components/Title'
	import DetailContent from './components/Content'
	import DetailFooter from './components/Footer'
	import DetailComments from '../../common/CommonComments'
	import DetailTools from '../../common/CommonTools'
	import DetailPrompt from '../../common/CommonPrompt'
	export default {
		name: 'detail',
		components: {
			DetailHeader,
			DetailTitle,
			DetailContent,
			DetailFooter,
			DetailComments,
			DetailTools,
			DetailPrompt
		},
		data () {
			return {
				ROUTERMOD: '',
				show_trans: false,
				detailTitle: '',
				detailComm: null,
				detailCtsNum: '',
				detailTag: '',
				detailUser: '',
				detailConImg: '',
				detailContent: '',
				ToolsId: '',
				ToolsMod: '',
				show_cts: false,
				show_notcts: true,
				commentsList: [],
				show_prompt: false,
				prompt_text: ''
			}
		},
		methods: {
			// 异步更新新评论 Tools组件传递上来的
			DetailCommentsChange (newDetail_comment) {
				this.show_cts = true
				this.show_notcts = false
				this.commentsList = newDetail_comment.data.data[0].list_comments.reverse()
			},
			getDetailData (module_router) {
				var _this = this
					_this.ToolsId = _this.$route.params.id
					_this.ToolsMod = module_router
				switch (module_router) 
				{
					case 'home':
						var url = '/home_lists?module=home_detail&id='
							break;
					case 'hot':	
						var url = '/hot_lists?module=hot_detail&id='
							break;
					case 'eight':
						var url = '/eight_lists?module=eight_detail&id='
							break;
				}
				axios({
					method: 'get',
					url: url + _this.$route.params.id
				})
				.then( response=> {
					let res = response.data
					if (res.status == 0) {
						const data = res.data[0]
						_this.detailTitle = data.list_title
						_this.detailTag = data.list_tag
						_this.detailComm = data.list_comm
						_this.detailCtsNum = data.list_comments.length
						_this.detailUser = data.list_user
						_this.detailConImg = data.list_con_img
						_this.detailContent = data.list_content
						
						if (data.list_comments.length > 0) {
							_this.show_cts = true
							_this.show_notcts = false
						}
 						_this.commentsList = data.list_comments.reverse()
						_this.show_trans = true
					}
				})
				.catch( err=> {
					console.log('REQUEST ERROR:' + err)
				})
			},
			toolsPrompt () {
				this.show_prompt = true
				this.prompt_text = '输入你想说的'
				setTimeout( ()=> {
					this.show_prompt = false
				},1600)
			},
			topUpChanges () {
				this.show_prompt = true
				this.prompt_text = '暂不开放充值系统'
				setTimeout( ()=> {
					this.show_prompt = false
				},1600)
			}
		},
		mounted () {
			//获取当前路径名
			var module_router = this.$route.params.mod
			this.getDetailData(module_router)
			this.ROUTERMOD = module_router
		}
	}
</script>
<style lang="stylus" scoped>
	.detail
		height:100vh
		background:#fff
</style>
